*{margin:0;padding:0}
.music-box{
    text-align: center;
    width:300px;
    margin:100px auto;
    position: relative;
}
.bg{
    border-radius: 50%;
    width:300px;
    animation: circle 5s linear infinite;
    
}
body{
    background-color: #eee;
}
.play-btn{
    width:60px;
}
.play-item{
    width:111px;
    position: absolute;
    top:-85px;
    transform:rotate(-30deg);
    transform-origin: 30px 30px;
    z-index:100;
}

.play{
    animation-play-state: running;
}
.pause{
    animation-play-state: paused;
}
@keyframes circle{
    0%{
        transform: rotate(0deg);
    }
    50%{
        transform: rotate(180deg);
    }
    100%{
        transform: rotate(360deg);
    }
}
/* play yaogan */
@keyframes itemPlay{

    0%{
        transform: rotate(-30deg);
    }
    100%{
        transform: rotate(0deg);
    }

    
}
.item-play{
    animation: itemPlay 2s linear;
}